<html>
  <head>
	<meta charset="UTF-8" /> 
    <title>Books Search with page42</title>
	
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />  	
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>	
	<script type="text/javascript">
      
      function setSearchResult(data){
        var str = '';
        console.log(data);

        // no data exception
        try {

		  str +='<ul data-role="listview">';
          for (var i = 0; i < data.items.length; i++){
            var item = data.items[i];
            str +=	'<li><a href="'+ item.selfLink + '">' + 
					'<!--img src="' + item.volumeInfo.imageLinks.smallThumbnail + '"/-->' + 
					'<h3>' +	item.volumeInfo.title + '</h3>' +
					
					'<p>'  +	item.volumeInfo.description + '</p>' +  
					'<p class="ui-li-aside"><strong>' + item.volumeInfo.authors[0] + '</strong></p>' +
					"</a></li>";

          }
		  str +='</ul>';

          $('#result').empty();
          $('#result').append(str);
		  $('#result ul').listview();
        }
        catch (err){
          console.log(err);
		  //console.log(data);
		  //$('#result').empty();
          //$('#result').append("no data");
          return false;
        }
      }
      
      function getInputString(){
        var q = $("#search").val();
        var key = 'AIzaSyCSPRhfVqueRQ5KzjvRqSSHZEOmUBYv0Lc';
        var apiurl = 'https://www.googleapis.com/books/v1/volumes?q='+q+'&key='+key;
        // '&langRestrict='+'ko';

        $.ajax({
            url: apiurl,
            success: setSearchResult,
            crossDomain: true,
            dataType: "jsonp"
          });
      }
      
      $(document).ready(function() {

        $("#search").keyup(getInputString);
      });
    </script>   
  </head>
  <body>
    <div data-role="page">
      <div data-role="header">
		<h1>Book Search</h1>
	  </div>
	  <div data-role="content">
		  <div data-role="fieldcontain" align="center">
			<input type="text" id="search"/>
		  </div>
		  <div id="result"></div>
	  </div>
    </div>
  </body>
</html>
<!--li>
	<h3>Stephen Weber</h3>
	<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
	<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
	<p class="ui-li-aside"><strong>6:24</strong>PM</p>
</li>
<li>
	<h3>Stephen Weber</h3>
	<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
	<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
	<p class="ui-li-aside"><strong>6:24</strong>PM</p>
</li-->